<template>
  <!--<div>13</div>-->
  <div>
    <div id="myPieChart" class="chart-draw-element chart-draw-element-visitor" style="width: 100%; height: 800px;"></div>
  </div>
</template>

<script lang="ts">
  import eCharts from 'echarts';
  import {VueComponent, Component, Prop} from "../modules";
  @Component({})
  export default class ProductList extends VueComponent {
    public toBack: boolean = false;
    public chart: any = null;
    public option: any =  {
      title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
      },
      series : [
        {
          name: '访问来源',
          type: 'pie',
          radius : '55%',
          center: ['50%', '60%'],
          data:[
            {value:335, name:'直接访问'},
            {value:310, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1548, name:'搜索引擎'}
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    public created () {
    }
    public mounted() {
      const id = document.getElementById("myPieChart");
      const myChart   = eCharts.init(id);
      myChart.setOption(this.option);
      setTimeout(() => {
        window.onresize = () => {
          myChart.resize();
        }
      }, 500);
      myChart.on("click", (w: any) => {
        console.log(w);
      });
    }
  }
</script>

<style module lang="less">
  @import "~styles/config/config";

</style>